<!--
 * @Author: your name
 * @Date: 2020-11-26 10:13:30
 * @LastEditTime: 2021-01-04 15:22:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_demo\src\components\index.vue
-->
<template>
  <div
    :class="['step', currentStep && 'current-step', backStep && 'back-step']"
    @click="handleStepClick"
  >
    <div
      class="step__right"
      ref="right"
      :style="{
        width: rWidth + 'px',
      }"
    >
      <slot name="right">
        <p v-html="rContent"></p>
      </slot>
    </div>
    <div class="step__icon-box" ref="icon" :style="{
      width: iconWidth + 'px'
    }">
      <div class="step__line" v-if="isLast"></div>
      <div class="step__icon">
        <slot name="icon">
          <span
            class="dot"
            :style="{
              width: dotSize,
              height: dotSize,
              backgroundColor: color,
            }"
          ></span>
        </slot>
      </div>
    </div>
    <div class="step__main">
      <slot>
        <h3 class="title">{{ title }}</h3>
        <div v-html="desc"></div>
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "step",
  props: {
    // 自定义图标
    icon: String,
    // 图标颜色
    color: String,
    // 圆点大小
    dotSize: {
      type: String,
      default: "10px",
    },
    title: [String],
    desc: [String],
    rContent: [String],
  },
  data() {
    return {
      // 当前子组件在父组件中的顺序
      index: -1,
    };
  },
  computed: {
    // 判断当前是否为最后节点
    isLast() {
      const parent = this.$parent;
      return parent.steps[parent.steps.length - 1] !== this;
    },
    // 当前节点
    currentStep() {
      const parent = this.$parent;
      return parent.active === this.index;
    },
    // 后面节点
    backStep() {
      const parent = this.$parent;
      return parent.active < this.index;
    },
    // 右边宽度
    rWidth() {
      const parent = this.$parent;
      return parent.domWidth;
    },
    // icon 宽度
    iconWidth(){
      const parent = this.$parent;
      return parent.iconWidth;
    }
  },

  beforeCreate() {
    this.$parent.steps.push(this);
  },
  beforeDestroy() {
    const steps = this.$parent.steps;
    const index = steps.indexOf(this);
    if (index >= 0) {
      steps.splice(index, 1);
    }
  },
  methods:{
    /**
     * 点击step
     */
    handleStepClick(){
      this.$emit('onStepClick')
    }
  },
  mounted() {
    const parent = this.$parent;
    const r = this.$refs.right;
    // 设置右侧内容整体宽度
    parent.widthList.push(r.getBoundingClientRect().width); 
    // 设置Icon整体宽度
    parent.iconWidthList.push(parseInt(this.dotSize))
  },
};
</script>
<style lang="scss" scoped>
h3,
p {
  margin: 0;
  padding: 0;
  line-height: 1;
}
.step {
  display: flex;
  &__right {
    padding-right: 8px;
    p {
      text-align: right;
      line-height: 1.3;
      color: rgba(0, 0, 0, 0.4);
    }
  }
  &__icon-box {
    position: relative;
  }
  &__line {
    position: absolute;
    width: 1px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background-color: rgba(0, 0, 0, 0.09);
  }
  &__icon {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    z-index: 99;
    .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #0063ea;
      border-radius: 50%;
    }
  }
  &__main {
    flex: 1;
    box-sizing: border-box;
    padding-left: 12px;
    padding-bottom: 12px;
    h3.title {
      font-size: 16px;
      padding-bottom: 6px;
      color: rgba(0, 0, 0, 0.85);
    }
    p {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
.current-step {
  .step__icon {
    .dot {
      background-color: #00c08c;
    }
  }
}
.back-step {
  .step__icon {
    .dot {
      background-color: #c0c4cc;
    }
  }
}
</style>